<template>
  <div class="page-fs" style="overflow: hidden">
    <div id="map"></div>
  </div>
</template>

<script setup>
import { Scene } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
import {nextTick, onMounted} from "vue";
import { PointLayer } from '@antv/l7';


onMounted(() => {
  nextTick(() => {
    const scene = new Scene({
      id: 'map',
      map: new Mapbox({
        style: 'light',
        pitch: 0,
        center: [107.054293, 35.246265],
        zoom: 4.056,
      }),
    });

    const pointLayer = new PointLayer()
        .source(data)
        .shape('circle')
        .size('mag', [1, 25])
        .color('mag', ['#5B8FF9', '#5CCEA1'])
        .style({
          opacity: 0.3,
          strokeWidth: 1,
        });
    scene.addLayer(pointLayer);
  })
})
</script>

<style scoped>

</style>